<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .dahezi {

            height: 100%;
            display: flex;

        }

        .dahezi .xuanxiang {
            width: 70%;
            height: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-evenly;


        }

        .dahezi .xuanxiang .diyige {
            width: 200px;
            height: 370px;
            /* display: none; */
        }

        .dahezi .xuanxiang .diyige img {
            width: 200px;
        }

        .dahezi .xuanxiang .diyige span {
            display: block;
            margin-left: 10px;
            margin-top: 10px;
        }

        .dahezi .xuanxiang .diyige button {
            margin-left: 10px;
            width: 100px;
            height: 30px;
            background-color: red;
            border: 1px solid transparent;
        }

        .gouwuche {
            width: 30%;
            height: 100%;
            display: none;
        }

        .gouwuche h3 {
            margin-top: 10px;
            margin-left: 15px;
        }

        .gouwuche .xuanzhong {
            width: 100%;
            height: 100px;
            display: flex;
            margin-top: 10px;
        }

        .gouwuche .xuanzhong input {
            margin-left: 10px;
        }

        .gouwuche .xuanzhong img {
            height: 100px;
            margin-left: 20px;
        }

        .gouwuche .xuanzhong span {
            line-height: 100px;
            margin-left: 20px;
        }
    </style>
</head>

<body>
    <div class="dahezi">
        <div class="xuanxiang">
            <div class="diyige">
                <img src="./img/1.png" alt="">
                <span>高级版工艺</span>
                <span>100000</span>
                <button>加入购物车</button>
            </div>
        </div>
        <div class="gouwuche">
            <h3>购物车（3）</h3>
            <div class="xuanzhong">
                <input type="checkbox">
                <img src="./img/1.png" alt="">
                <span>100</span>
                <span>100</span>
                <span>删除</span>
            </div>
        </div>
    </div>
</body>

</html>
<script>
    //商品列表数据
    let arr = [
        { tupian: 'img/1.png', name: '高级按摩椅', rmb: '10000', but: '加入购物车' },
        { tupian: 'img/2.png', name: '按摩椅', rmb: '1000', but: '加入购物车' },
        { tupian: 'img/3.png', name: '高级按摩椅', rmb: '10900', but: '加入购物车' },
        { tupian: 'img/4.png', name: '高级按摩椅', rmb: '13000', but: '加入购物车' },
        { tupian: 'img/5.png', name: '高级按摩椅', rmb: '10100', but: '加入购物车' },
        { tupian: 'img/6.png', name: '高级按摩椅', rmb: '10', but: '加入购物车' },
        { tupian: 'img/7.png', name: '高级按摩椅', rmb: '100', but: '加入购物车' },
        { tupian: 'img/8.png', name: '高级按摩椅', rmb: '1020', but: '加入购物车' }
    ]
    //购物车数据
    var oo = { ster:[{ tupian: 'img/7.png', name: '高级按摩椅', rmb: '100', but: '加入购物车' },
        { tupian: 'img/8.png', name: '高级按摩椅', rmb: '1020', but: '加入购物车' }] }
    //渲染列表
    function render(arr,oo) {
        var ster = arr.map((item) => {
            return `<div class="diyige">
                <img src="${item.tupian}" alt="">
                <span>高级版工艺</span>
                <span>100000</span>
                <button>加入购物车</button>
            </div>`
        }).join('')
    document.querySelector('.dahezi .xuanxiang').innerHTML=ster
    function renderGouwuche(oo){ 
        gouwuche.innerHTML = oo.ster.map((item)=>{
            console.log(oo);
            console.log(item);
                return ` 
                <h3>购物车（3）</h3>
                <div class="xuanzhong">
                <input type="checkbox">
                <img src="./img/1.png" alt="">
                <span>100</span>
                <span>100</span>
                <span>删除</span>`
            }).join('')
            document.querySelector('.gouwuche').innerHTML=gouwuche
    }
    }
    render(arr,oo)
    //ster点击事件
    var ster = document.querySelector('.xuanxiang');
    ster.onclick=function(e){
        if(e.target.tagName=='BUTTON'){
            //获取点击上品的下标
            var buts=[...document.querySelectorAll('button')]
            var index=buts.findIndex((item)=>{
                return item==e.target
            })
            // 添加商品到购物车
            oo.ster.push(arr[index])
            //重新渲染购物车
            renderGouwuche()
        }

    }
</script>